<template>
  <div>

  <ui>

      <li v-for="item in person">

          <p>姓名:{{ item.name }}</p>
          <p>性别:{{ item.sex}}</p>

        
      </li>



  </ui>
<table border="1">

  <tr>
    <td>编号</td>
    <td>姓名</td>
    <td>性别</td>
  </tr>
  <tr v-for="item in list">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.sex }}</td>
  </tr>

  <input type="text" v-model="str">
  <a>{{ str }}</a>
</table>



  </div>
</template>

<script setup lang="ts">


import{reactive,toRefs}from 'vue'

let data=reactive({

person:[

          {

          name:'zhang',
          sex:21,

          },
                    {

          name:'zhang',
          sex:21,

          },
                    {

          name:'zhang',
          sex:21,

          },
                    {

          name:'zhang',
          sex:21,

          },



],


list:[



{id:1,name:'zhangsan',sex:'nan'},
{id:2,name:'zhangsan',sex:'nan'},
{id:3,name:'zhangsan',sex:'nan'}


]
,str:'asdfsdfsdfsdsdsd'



})


let {person}=toRefs(data);
let {list}=toRefs(data);

let {str}=toRefs(data);







</script>

<style scoped>

</style>